<template>
  <view class="message-root">
    <block v-if="message">
      <block v-if="showRecProductQa">
        <!-- <product-service-card :message="message" :isSignOutService="isSignOutService" @signOutService="signOutService" /> -->
      </block>
      <view
        class="avatar-text-box"
        :class="{ left: mode === 'left', right: mode === 'right' }"
      >
        <block v-if="mode === 'right'">
          <rich-text
            @longpress="onLongPressTxt"
            :nodes="splitText(message.text)"
            class="text"
            :class="{ 'text-bg': !message.recordStaus }"
            style="word-break: break-all; white-space: pre-line"
            v-if="!message.recordStaus && !message.picUrl"
          ></rich-text>
          <view
            v-if="false"
            class="tool-tip-txt"
            @click="onTextCopy(message.text)"
          ></view>
          <view v-if="isShowTooltip" class="tool-tip" @click="onText"
            :data-spmCntSuffix="'ChatAiPage.message@1.play@1'"
            :data-custom="1"
            :data-spm="'1'"
          ></view>
          <view
            class="text"
            @longpress="onLongPress"
            style="
              word-break: break-all;
              white-space: pre-line;
              justify-content: flex-end;
            "
            @click="playAudio(message.speechUrl)"
            :style="{
              width: 150 + 3.5 * Math.ceil(message.voiceTime / 1000) + 'rpx',
            }"
            v-if="message.recordStaus"
            :data-spmCntSuffix="'ChatAiPage.message@1.translate@1'"
            :data-custom="1"
            :data-spm="'1'"
            >{{ Math.ceil(message.voiceTime / 1000) }}''<view
              class="pay-icon"
              :class="{ 'playing-gif': isPlaying }"
            ></view>
          </view>
          <uni-transition :mode-class="['fade','slide-top']" :duration="300" :show="message.picUrl">
            <image
              v-if="message.picUrl"
              :src="message.picUrl"
              mode="aspectFill"
              class="pic-box image"
            />
          </uni-transition>
          <image
            v-if="showAvatar"
            class="avatar image"
            :src="message.avatar"
            mode="scaleToFill"
          />
          <!-- <view v-if="isText || true" class="record-text-box">{{ message.translateText }}</view> -->
        </block>
        <block v-if="mode === 'left' && message.isShowMessage">
          <image
            v-if="showAvatar"
            class="avatar image"
            :src="message.avatar"
            mode="scaleToFill"
          />
          <view style="width: 100%">
            <view class="message-text-box" :class="{'active': mode === 'left'}" 
                :style="{
                  'padding-bottom': showOpen ? '48rpx' : '0',
                }">
              <view class="sayHelloContent" v-if="message.card && message.card.sayHelloContent">{{message.card.sayHelloContent}}</view>
              <rich-text
                id="message-text"
                :class="{
                  'message-maxheight': needMaxheight,
                  'more-margin': showOpen,
                }"
                :nodes="richTextNodes"
                class="text"
                style="word-break: break-all; white-space: pre-line"
              ></rich-text>
              <!-- <view class="shadow" v-if="showShadow"></view> -->
              <!-- 客服 -->
              <view v-if="showService" style="margin-top:-20rpx">
                <view class="service">
                  <view class="po-text">也可以<text style="color:#5876D6">【点击此处进入在线客服】</text></view>
                  <button class="po-button " open-type="contact" ></button>
                </view>
              </view>
              <view class="selector-box" v-if="showSelectorCard">
                <view
                  class="left-butter"
                  @click.stop="
                    editJourney(message.selectorCard.leftButtonPrompt)
                  "
                  >{{ message.selectorCard.leftButter }}</view
                >
                <view
                  class="right-butter"
                  @click.stop="showCardDetail(message.selectorCard.dspId)"
                  >{{ message.selectorCard.rightButter }}</view
                >
              </view>
              <!-- 攻略 -->
              <Strategy
                v-if="isShowStrategy"
                @postM="onStrategyClick"
                :title="message.articleText"
                :titleList="message.refArticleList"
                @onScrollToBottom="$emit('onScrollToBottom')"
              ></Strategy>
              <!-- 是否切换目的地 -->
              <block v-if="showChangeDest">
                <view class="sureChangeBox">
                  <view class="btn-box false" 
                    :class="disableChangeDestBtn ? 'disabled' : ''" 
                    @click="changeDestFun(0)"
                    :data-spmCntSuffix="`ChatAiPage.message@2.location@3`"
                    :data-custom="1"
                    :data-spm="1"
                  >
                    <view class="btn-txt">否</view>
                  </view>
                  <view class="btn-box true" 
                    :class="disableChangeDestBtn ? 'disabled' : ''" 
                    @click="changeDestFun(1)"
                    :data-spmCntSuffix="`ChatAiPage.message@2.location@2`"
                    :data-custom="1"
                    :data-spm="1"
                  >
                    <view class="btn-txt">是</view>
                  </view>
                </view>
              </block>
              <view
                v-if="message.recProductQa.refundBtn"
                style="padding: 0 26rpx 20rpx 26rpx;margin-top: -20rpx;margin-bottom: -70rpx"
                @click.stop="gotoRefund(message.recProductQa.orderId)"
                :data-spmCntSuffix="`ChatAiPage.message@2.order@1`"
                :data-custom="1"
                :data-spm="1"
              >
                <text style="color: #5876d6; font-size: 24rpx">申请退款</text>
                <uni-icons type="forward" color="#5876D6" size="14"></uni-icons>
              </view>
              <block v-if="showRecProductQa">
                <view class="product-box" v-if="message.card.recProductQa.questionList.length > 0 || message.card.recProductQa.cardBtn.length > 0">
                  <block v-if="message.card.recProductQa.questionList.length > 0">
                    <view class="question-title-box">
                      <view class="question-text">猜你想问：</view>
                      <view
                        v-if="message.card.recProductQa.hasChange"
                        class="question-sm-text"
                        @click="changeQuestion"
                        :data-spmCntSuffix="`ChatAiPage.message@2.changeQuestion@`"
                        :data-custom="1"
                        :data-spm="1"
                      >
                        换一批
                        <image
                          src="https://cdn1.visiotrip.com/h5AndMini/2023-11-17/refresh-icon.png"
                          mode="scaleToFill"
                          class="change-icon image"
                        />
                      </view>
                    </view>
                    <view class="question-box">
                      <view
                        class="question-item"
                        v-for="(question, questionIdx) in message.card.recProductQa.questionList"
                        :key="questionIdx"
                        @click="questionClick(question)"
                        :data-spmCntSuffix="'ChatAiPage.message@2.recProductQa@'"
                        :data-custom="questionIdx"
                        :data-spm="question"
                      >
                        <text class="omit1">{{question}}</text>
                        <image
                          v-if="message.card.recProductQa.level === 1"
                          src="../../../static/ai/icon/card-right.png"
                          mode="scaleToFill image"
                        />
                      </view>
                    </view>
                  </block>
                  <view class="quetion-footer" v-if="message.card.recProductQa.sourceType === 'ORDER' && message.card.recProductQa.cardBtn.length > 0">
                    <view
                      class="btn"
                      :class="btn.style===2 ? ' right' : ''"
                      v-for="(btn, btnIdx) in message.card.recProductQa.cardBtn"
                      :key="btnIdx"
                      @click="actionClick({actionText: btn.message, buttonType: btn.buttonType, triggerType: 4, orderId: btn.orderId})"
                      :data-spmCntSuffix="'ChatAiPage.message@2.recProductQa@footBtn'"
                      :data-custom="btnIdx"
                      :data-spm="btn"
                    >
                      {{ btn.text }}
                    </view>
                    <!-- <view class="btn right" @click="actionClick()">查看凭证</view> -->
                  </view>
                </view>
              </block>
              <!-- 订单 -->
              <view v-if="showShareHotelOrderInfo">
                <hotel-order-card
                  :cardType="message.card.chatCardList[0].type"
                  :info="message.card.chatCardList[0]"
                  @sureClick="actionClick"
                />
              </view>
              <view
                v-if="message.orderId"
                style="padding: 0 26rpx 20rpx 26rpx"
                @click.stop="gotoOrderUrl(message.orderId)"
                :data-spmCntSuffix="`ChatAiPage.message@2.order@1`"
                :data-custom="1"
                :data-spm="1"
              >
                <text style="color: #5876d6; font-size: 24rpx">查看订单</text>
                <uni-icons type="forward" color="#5876D6" size="14"></uni-icons>
              </view>
              <view
                v-if="message.appId"
                style="padding: 0 26rpx 20rpx 26rpx;margin-top: -20rpx"
                @click.stop="gotoDisneyApp(message.appId)"
                :data-spmCntSuffix="`ChatAiPage.message@2.order@1`"
                :data-custom="1"
                :data-spm="1"
              >
                <text style="color: #5876d6; font-size: 24rpx">前往香港迪士尼小程序</text>
                <uni-icons type="forward" color="#5876D6" size="14"></uni-icons>
              </view>
              <!-- 新商品卡片  统一样式 -->
              <block v-if="showUnifyCard">
                <UnifyCard ref="unifyCard" :conversationId="conversationId" :data="message.card.chatSynthesizeCard" />
              </block>
              <block v-if="showGraphicItineraryCard">
                <new-journal-card :cardData="message.graphicItineraryCard" @showProduct="showProduct" @actionClick="actionClick" />
              </block>   
              <!-- 新行程推荐 推荐卡片 -->
              <block v-if="showItineraryCard">
                <view class="strongUsher"  :class="{'strongUsher-none': !message.itineraryCard.showButton}" style="border: none;background: none;padding-top: 1rpx">
                  <view class="main-box" @click.stop="showCardDetail(message.itineraryCard.itineraryId, message.itineraryCard.showButton)">
                    <view class="card-mask"></view>
                    <img v-if="message.itineraryCard.mainPicture" class="mainPicture" :src="message.itineraryCard.mainPicture" mode="aspectFill">
                    <img v-else class="mainPicture" src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/trip-back-1.png" mode="aspectFill">
                    <view class="itineraryTitle omit2"
                    :class="{'active':message.itineraryCard.mainPicture}"
                    >{{ message.itineraryCard.itineraryTitle }}</view>
                  </view>
                  <view class="btn-list-box" v-if="message.itineraryCard.showButton">
                    <view class="btn-2" 
                      @click.stop="showCardDetail(message.itineraryCard.itineraryId, message.itineraryCard.showButton)"
                      :data-spmCntSuffix="'ChatAiPage.message@2.detail@1'"
                      :data-custom="1"
                      :data-spm="1"
                      style="width: 100%"
                    >查看详细攻略</view>
                    <!-- yuanbin 20250506 不显示行程商品 -->
                    <!-- <view class="btn-1" 
                      @click.stop="showProduct(message.itineraryCard.itineraryId)"
                      :data-spmCntSuffix="'ChatAiPage.message@2.product@1'"
                      :data-custom="1"
                      :data-spm="1"
                    >行程商品</view> -->
                  </view>
                </view>
              </block>
              <block v-if="showPoiPhoneCard">
                <poi-phone-card :messageData="message.card.poiCard" />
              </block>
              <block v-if="isShowDetail">
                <view class="pay-box">
                  <block v-if="message.needPosition && printedStatus">
                    <view class="position" 
                      @click="openLocation"
                      :data-spmCntSuffix="`ChatAiPage.message@2.location@1`"
                      :data-custom="1"
                      :data-spm="1"
                    >
                      开启定位👉
                      <uni-icons
                        type="forward"
                        color="#5876D6"
                        size="14"
                      ></uni-icons>
                    </view>
                  </block>
                  <view class="right-box" v-if="printedText.length > 10">
                    <view class="cp-btn" @click.stop="oncopy"
                      :data-spmCntSuffix="'ChatAiPage.message@2.copy@1'"
                      :data-custom="1"
                      :data-spm="1"
                    ></view>
                    <!-- yuanbin 因为需要熊猫语音包， 现在没有， 所以先去掉语音播报 -->
                    <!-- <view
                      class="pay-btn"
                      @click.stop="onpay"
                      :class="{ suspend: isleftPlaying }"
                      :data-spmCntSuffix="`ChatAiPage.message@2.paly@1`"
                      :data-custom="1"
                      :data-spm="1"
                    ></view> -->
                    <view class="cp-btn like"
                      @click.stop="onLike(message)"
                      :class="{ suspend: isLike }"
                      :data-spmCntSuffix="'ChatAiPage.message@2.like@1'"
                      :data-custom="1"
                      :data-spm="1"
                    ></view>
                    <view class="cp-btn unlike"
                      @click.stop="onUnlike(message)"
                      :class="{ suspend: isUnlike }"
                      :data-spmCntSuffix="'ChatAiPage.message@2.unlike@1'"
                      :data-custom="1"
                      :data-spm="1"
                    ></view>
                  </view>
                </view>
              </block>
              <!-- 题词 -->
              <view class="suggest-box" v-if="printedStatus && message.suggestActions && message.suggestActions.length > 0">
                <view class="suggest-title">猜你想问</view>
                <view
                  class="suggest-content"
                  v-for="(suggest, suggestIdx) in message.suggestActions"
                  :key="suggestIdx"
                  @click="suggestClick(suggest)"
                  :data-spmCntSuffix="'ChatAiPage.toolBar@4.suggestClick@1'"
                  :data-custom="suggestIdx + 1"
                  :data-spm="suggest"
                >
                  <text style="font-size: 48rpx;margin-right: 8rpx">•</text>
                  <text class="suggest-text">{{ suggest.actionText }}</text>
                </view>
              </view>
              <view class="open-btn" @click.stop="onOpen" v-if="showOpen"
                >{{ isOpen ? "收起" : "展开" }}
                <image
                  class="img image"
                  :src="
                    isOpen
                      ? 'https://cdn1.visiotrip.com/h5AndMini/2023-3-29/arrow-gr-up.png'
                      : 'https://cdn1.visiotrip.com/h5AndMini/2023-3-29/arrow-gr-down.png'
                  "
                  mode="scaleToFill"
                />
              </view>
              <!-- 提问 -->
              <block v-if="actionList.length > 0 && message.card && message.card.answerType == 9 ">
                <view class="problem-box">
                  <view class="problem-box-title">
                    <view>你可以试着问我👇:</view>
                    <view class="refresh-box" 
                      @click="guidingSuggestActions(0)"
                      :data-spmCntSuffix="`ChatAiPage.helloCard@1.change`"
                      :data-custom="1"
                      :data-spm="1"
                    >
                      换一批
                      <img class="refresh-icon" src="https://cdn1.visiotrip.com/h5AndMini/2023-11-17/refresh-icon.png" >
                    </view>
                  </view>
                  <!-- 欢迎题词 -->
                  <view class="problem-box-list">
                    <block 
                      v-for="(item,index) in actionList" 
                      :key="index">
                      <view
                        :class="'action-box action-' + item.cardType + (index===2 && actionList.length===3 ? ' last' : '')"
                        v-if="item.cardType !== 'PRODUCT'">
                        <view class="action-title-box">
                          <!-- <img :src="item.icon" class="title-icon" alt="" srcset=""> -->
                          <img :src="item.titleImg" class="title-img" alt="" srcset="">
                          <!-- <view :class="'subTitle title-'+ item.cardType">{{ item.subTitle }}</view> -->
                        </view>
                        <view class="action-bg-img"></view>
                        <view class="line-view"></view>
                        <view style="position: absolute;width: 100%;z-index: 99;display:flex;flex-direction: column;height:180rpx;">
                          <block v-for="(actionItem,actionIndex) in item.promptList" :key="actionIndex">
                            <block v-if="actionIndex < 3">
                              <view
                                class="problem-list-item" 
                                :class="'list-'+ item.cardType"
                                @click="actionClick(actionItem,item)"
                                :data-spmCntSuffix="`ChatAiPage.helloCard@2.chose`"
                                :data-custom="index + 1"
                                :data-spm="actionItem"
                              >
                                <view class="item-title omit1">{{ actionItem.promptText }}</view>
                                <img style="width: 22rpx;height: 22rpx" src="../../../static/ai/icon/card-right.png" />
                              </view>
                            </block>
                          </block>
                        </view>
                      </view>
                      <view v-else class="scroll-box">
                        <view 
                          v-for="(actionItem,actionIndex) in item.promptList" :key="actionIndex"
                          :data-spmCntSuffix="`ChatAiPage.helloCard@2.product`"
                          :data-custom="index + 1"
                          :data-spm="actionItem"
                          @click="toProductDetail(actionItem)"
                          class="scroll-item">
                          <view class="item-box">
                            <view class="img-box">
                              <img
                                class="item-img"
                                :src="actionItem.mainPictureUrl"
                                mode="aspectFill"
                              />
                              <view class="item-tips">
                                <view class="tips-box">{{actionItem.textContent}}</view>
                              </view>
                              <img
                                class="item-icon"
                                :src="actionItem.productTypeIconUrl"
                              />
                            </view>
                            <view class="item-info">
                              <view class="info-title omit1">
                                {{actionItem.productName}}
                              </view>
                              <view class="price-box" >
                                <view class="price-1">{{actionItem.priceInfo.currency}}{{actionItem.priceInfo.price}}</view>
                                <view class="price-2">{{actionItem.priceInfo.description}}</view>
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </block>
                  </view>
                </view>
              </block>
              
            </view>
            <view
              style="display: flex; margin-top: 16rpx; margin-left: 20rpx"
              v-if="showProgress"
            >
              <view class="progress-box">
                <view class="progress-bar">
                  <view
                    class="progress-bar-inner"
                    :style="{
                      width: progressWidth + '%',
                    }"
                  ></view>
                </view>
              </view>
              <view
                style="color: #4d566a; font-size: 20rpx; padding-left: 20rpx"
                >{{ progressWidth }}%</view
              >
            </view>
          </view>
        </block>
      </view>
      <view
        class="avatar-text-box"
        style="margin-top: 41rpx"
        :class="{ left: mode === 'left', right: mode === 'right' }"
        v-if="mode === 'left' && showRecItinerary"
      >
        <block v-if="mode === 'left' && showRecItinerary">
          <image
            v-if="showAvatar"
            class="avatar image"
            :src="message.avatar"
            mode="scaleToFill"
          />
          <view>
            <view class="message-text-box" style="padding-top: 30rpx">
              <!-- 参考行程 -->
              <RecItinerary
                @postM="showCardDetail"
                :title="message.card.recItinerary.itineraryTheme"
                :titleList="message.card.recItinerary.itineraryList"
                @onScrollToBottom="$emit('onScrollToBottom')"
              />
            </view>
          </view>
        </block>
      </view>
      <view
        class="avatar-text-box"
        :class="{ left: mode === 'left', right: mode === 'right' }"
        v-if="isShowtext"
      >
        <block v-if="mode === 'right'">
          <rich-text
            :nodes="message.text"
            class="text text-content"
            style="word-break: break-all; white-space: pre-line"
            v-if="!message.recordStaus || !message.picUrl || isShowtext"
          ></rich-text>
        </block>
      </view>
      <!-- 推荐商品orDSP 卡片 -->
      <block v-if="showProductCard">
        <chatCard
          :title="
            message.card.dsp.dspId ? '这是你的行程路线所包含的商品' : '推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <template #content>
            <VImageText
              class="image-text image"
              v-for="(item, index) in message.card.productList"
              mode="product"
              :info="item"
              :key="item.id"
              :data-spmCntSuffix="`ChatAiPage.productCard@1.product`"
              :data-custom="index + 1"
              :data-spm="item"
            />
            <view
              class="journey-btn"
              v-if="message.card.dsp.dspId"
              @click="gotoDsp(message.card.dsp.dspId)"
            >
              <image
                class="journey-icon image"
                src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/journey-icon@2x.png"
                mode="scaleToFill"
              ></image
              >定制行程
            </view>
          </template>
        </chatCard>
      </block>
      <!-- 出行提醒 -->
      <block v-if="showTraveTips">
        <travelTips :tripData="message.card.tipsInfo"></travelTips>
      </block>
      <block v-if="showTravelDemand">
        <TravelDemand
          @editItinerary="editItinerary"
          :isHotelJourneyDemand="message.isHotelJourneyDemand"
          :cardInfo="message.card.journeyDemand"
          @setTabBar="setTabBar"
        />
      </block>
      <!-- DSP购买卡片 -->
      <block v-if="showTripCard">
        <TripCard
          :tripData="message.card.tripCardInfo"
          :btStatus="btStatus"
          :travelerWith="travelerWith"
          @editFina="editFina"
          @setTabBar="setTabBar"
          :conversationId="conversationId"
        />
      </block>
      <!-- 攻略卡片  -->
      <!-- <block v-if="isShowWalkthrough">
        <chatCard
          :title="message.card.recArticle.articleTheme"
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/gl-icon.png'"
        >
          <template #content>
            <Walkthrough
              :recArticle="message.card.recArticle"
              @gotoUrl="onStrategyClick"
            />
          </view>
        </chatCard>
      </block> -->
      <!-- 行程偏好 -->
      <block v-if="showPreference">
        <chatCard
          :title="`旅行偏好`"
          :iconSrc="''"
        >
          <template #content>
            <Preference
              :showData="message"
              :clickable="clickable"
              @sureClick="sureClick"
            />
          </template>
        </chatCard>
      </block>
      <!-- 热门景点推荐 -->
      <block v-if="showRecPoi">
        <chatCard
          :title="message.card.recPoiData.recTitle"
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/hotPoi.png'"
        >
          <template #content>
            <RecPoi
              :showData="message.card.recPoiData"
              @sureClick="recPoisureClick"
            />
          </template>
        </chatCard>
      </block>
      <!-- 切换目的地成功 -->
      <block v-if="showChangeOk">
        <view class="changeOkBox">
          <!-- <view class="lineBox"></view> -->
          <view class="lineTxt">{{ showChangeTxt }}</view>
          <!-- <view class="lineBox"></view> -->
        </view>
      </block>
      <!-- 秒读助手 -->
      <block v-if="showRead">
        <chatCard
          :title="`秒读攻略助手 - 小报`"
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/gl-icon.png'"
        >
          <template #content>
            <ReadVue :infoData="message.card.readData" />
          </template>
        </chatCard>
      </block>
      <!-- 秒读助手拖 -->
      <block v-if="showArticleAssistantUrl">
        <img
          @click="previewImage(message.card.articleAssistantUrl)"
          class="articleImg"
          :src="message.card.articleAssistantUrl"
          mode="aspectFill"
        />
      </block>
      <!-- 新行程推荐 推荐文案 -->
      <block v-if="showItineraryCard && message.itineraryCard.strongUsher">
        <view class="strongUsher">
          {{ message.itineraryCard.strongUsher }}
        </view>
      </block>
      <!-- 推荐POI -->
      <block v-if="showSharePoi">
        <chatCard
          :title="'推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <template #content>
            <PoiCard
              mode="poi"
              :info="message.card.poi"
            />
          </template>
        </chatCard>
      </block>
      <!-- 推荐商品 -->
      <block v-if="showShareProduct">
        <chatCard
          :title="'推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <template #content>
            <PoiCard
              mode="product"
              :info="message.card.product"
            />
          </template>
        </chatCard>
      </block>
      <!-- 订单 -->
      <block v-if="showShareOrderInfo">
        <OrderCard :info="message.card.orderInfo"></OrderCard>
      </block>
    </block>
    <!-- ai智能旅拍 -->
    <block v-if="showShareAiPhoto">
      <chatCard
          :title="'推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <template #content>
            <PoiCard
              mode="aiPhoto"
              :info="message.card.aiPhoto"
              @sureClick="AiPhotoClick"
            />
          </template>
        </chatCard>
    </block>
    <!-- 在线签合同 -->
    <block v-if="showContract">
        <view v-for="(item,index) in message.card.contractInfoList" :key="index">
          <ContractCard :contractInfo="item"/>
        </view>
    </block>
    <!-- 行程分享卡片 -->
    <block v-if="showShareItinerary">
      <view class="strongUsher">
        <view class="main-box" @click.stop="showCardDetail(message.card.itineraryCard.itineraryId)">
          <view class="card-mask"></view>
          <img v-if="message.card.itineraryCard.mainPicture" class="mainPicture" :src="message.card.itineraryCard.mainPicture" mode="aspectFill">
          <img v-else class="mainPicture" src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/trip-back-1.png" mode="aspectFill">
          <view class="itineraryTitle omit2"
          :class="{'active':message.card.itineraryCard.mainPicture}"
          >{{ message.card.itineraryCard.itineraryTitle }}</view>
        </view>
      </view>
    </block>
    <!-- 攻略卡片  -->
    <block v-if="showShareArticle">
      <chatCard
        :title="message.card.recArticle.articleTheme"
        :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/gl-icon.png'"
      >
        <template #content>
          <Walkthrough
            :recArticle="message.card.recArticle"
            @gotoUrl="onStrategyClick"
          />
        </template>
      </chatCard>
    </block>
    <!-- AI旅拍首页分享 -->
    <block v-if="showAIphotoHome">
      <AiPhotoCard/>
    </block>
    <!-- 我的写真分享 -->
    <block v-if="showAIPhotoShareCard">
      <ai-photo-share-card :info="message.card.aiPhoto" />
    </block>
    <!-- 组合商品打包分享 -->
    <block v-if="showShareDSPInfo">
      <chatCard
          :title="'推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <template #content>
            <PoiCard
              mode="shareDSP"
              :info="message.card.shareDSPInfo"
            />
          </template>
        </chatCard>
    </block>
    <!-- 酒店比价弹框 -->
    <block v-if="showHotelCompare">
      <HotelCompare @callBack="compareCall" :chatCardList="message.card.chatCardList"></HotelCompare>
    </block>
    <!-- 酒店分享 -->
    <block v-if="showShareHotelInfo">
      <ai-hotel-share-card :info="message.card.chatCardList[0]" />
    </block>
    <!-- 酒店偏好 -->
    <block v-if="showHotelPreferenceInfo">
      <chatCard
        :title="message.card.hotelPreference.cardTitle.content"
        :iconSrc="message.card.hotelPreference.cardTitle.titleIcon"
        titleBgColor="#FFEBC8"
      >
        <template #content>
          <HotelPreference
            :showData="message.card.hotelPreference"
            :clickable="clickable"
            @sureClick="actionClick"
          />
        </template>
      </chatCard>
    </block>
    <!-- AI推荐酒店比价 -->
    <block v-if="showHotelPriceParityInfo">
      <chatCard
        :title="message.card.hotelPriceParity.cardTitle.content"
        :iconSrc="message.card.hotelPriceParity.cardTitle.titleIcon"
        titleBgColor="#FFEBC8"
        bgColor="#ffffff"
      >
        <template #content>
          <hotel-price-parity
            :showData="message.card.hotelPriceParity"
            :clickable="clickable"
            @sureClick="actionClick"
          />
        </template>
      </chatCard>
    </block>
    <!-- 酒店/门票订单 订单卡片改版去除 -->
    <!-- <block v-if="showShareHotelOrderInfo">
      
      <view class="more-order-box" v-if="message.card.chatCardList[0].type == '202' || message.card.chatCardList[0].type == '203'">
        <view class="order-txt-1">点击下面按钮，你还可以查看其他更多订单哦～</view>
        <view class="order-txt-2" @click="orderItemClick"
        :data-spmCntSuffix="'.card@1.btnMoreOrder'"
        :data-custom="1"
        :data-spm="{pos:'更多订单'}">
          更多订单
          <uni-icons
            type="forward"
            color="#5876D6"
            size="14"
          ></uni-icons>
        </view>
      </view>
    </block> -->
    <!-- 旅拍权益领取/迪士尼独家指南 -->
    <block v-if="showAIPhotoReceive">
      <ai-photo-share-card :info="message.card.chatCardList[0]" type="receive" />
    </block>

    <!-- 客服二维码 -->
    <block v-if="showWeChatUrl">
      <img class="wechatUrl"
      :data-spmCntSuffix="'ChatAiPage.weChatUrl@1.click'"
      :data-custom="1"
      :data-spm="1"
      @click.stop="openWeChatUrl(message.card.wechatUrl)" :src="message.card.wechatUrl">
    </block>
    <!-- 迪士尼指引图片 -->
    <block v-if="showImgUrl">
      <image class="imgUrl image"
        v-for="(url, index) in message.card.imageList"
        :key="index"
        :data-spmCntSuffix="'ChatAiPage.weChatUrl@1.click'"
        :data-custom="1"
        :data-spm="1"
        :src="url.expandImage || url.image"
        mode="widthFix"
        @click.stop="openWeChatUrl(url.image)"
        />
    </block>
    <!-- 开启新的对话 -->
    <block v-if="showChangeOk || showNewDialogue || showNewChat || isCreateNewChat">
      <view class="changeOkBox active">
        <view class="lineTxt">开启新的对话</view>
      </view>
    </block>
    <view class="mask" v-show="showMask" @click="handleMaskClick"></view>
  </view>
</template>

<script>
// const { queryCardTemplateDest } = require("../serve/index");
import { queryCardTemplateDest } from "../serve/index";
import VImageText from "./vImageText.vue";
import Poi from "./poi.vue";
import chatCard from "./chatCard/index.vue";
import TripCard from "./tripCard.vue";
import TravelDemand from "./travelDemand.vue";
import travelTips from "./travelTips/travelTips.vue";
import Strategy from "./strategy/index.vue";
import Preference from "./preference/preference.vue";
import RecItinerary from "./recItinerary/recItinerary.vue";
import ReadVue from "./read.vue";
import RecPoi from "./recPoi.vue";
import OrderCard from './orderCard.vue';
import ContractCard from './contractCard.vue';
import PoiCard from './poiCard.vue'
import AiPhotoCard from './aiPhotoCard.vue'
import AiPhotoShareCard from './aiPhotoShareCard.vue';
import HotelCompare from './hotelCompare.vue'
import HotelPreference from './hotelPreference/HotelPreference.vue'
import HotelPriceParity from './hotelPriceParity/hotelPriceParity.vue';
import HotelOrderCard from './hotelOrderCard.vue';
import AiHotelShareCard from "./aiHotelShareCard.vue";
import NewJournalCard from './newJournalCard.vue';
import UnifyCard from './unifyCard.vue'
import Walkthrough from "./walkthrough.vue";
import ProductServiceCard from './productServiceCard.vue';
import PoiPhoneCard from './poiPhoneCard.vue';
export default {
  components: {
    VImageText,
    Poi,
    chatCard,
    TripCard,
    TravelDemand,
    travelTips,
    Strategy,
    Preference,
    RecItinerary,
    RecPoi,
    OrderCard,
    ContractCard,
    PoiCard,
    AiPhotoCard,
    AiPhotoShareCard,
    HotelCompare,
    HotelPreference,
    HotelPriceParity,
    HotelOrderCard,
    AiHotelShareCard,
    NewJournalCard,
    UnifyCard,
    ReadVue,
    Walkthrough,
    ProductServiceCard,
    PoiPhoneCard,
  },
  data() {
    return {
      showOpen: false,
      isOpen: false,
      isBlinking: false,
      innerAudioContext: "",
      isPlaying: false,
      isShowTooltip: false,
      isleftPlaying: false,
      innerAudioContextLeft: "",
      isText: false,
      isShowtext: false,
      isPlayEnd: false,
      breakTheIce: false, //记录是否已经破冰过
      interval: 25,
      timer: null,
      printedText: "",
      unprintedText: "",
      getDspInfoStatus: false,
      progressWidth: 0,
      progressBarTimer: null,
      showProgress: false,
      outStatr: 0,
      think: true,
      btStatus: true,
      printedStatus: false, // 打字效果队列完成后会变成true， 如果有卡片需要在打字机完成后显示的，需要增加此字段判定; 注意是要轮询获取打字机内容和卡片才需要增加的。纯属卡片，没有轮询得到的数据，不需要
      showChangeOk: false,
      aiDestItem: "",
      showChangeTxt: "",
      isShowTooltipTxt: false,
      disableChangeDestBtn: false, // 切换目的地按钮不可点击
      showMask:false,
      clickable:true,
      isLike: false, // 点赞
      isUnlike: false,
      audioCtxId: -1, // 当前播放的音频id
    };
  },
  emits: ["clickTip", "feedack", "editTripCardInfo"],
  props: {
    travelerWith:{
      type:Boolean
    },
    meId: {
      type: String,
      default: "",
    },
    mode: {
      type: String,
      default: "right",
    },
    message: {
      type: Object,
    },
    startProgress: {
      type: Boolean,
    },
    showAvatar: {
      type: Boolean,
      default: false,
    },
    manualPause:{
      type: Boolean,
      default:false
    },
    actionList:{
      type:Array,
      default:[]
    },
    conversationId:{
      type: String,
      default: "",
    },
    isCreateNewChat: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    suggestClick(item) {
      this.$emit('suggestClick', item);
    },
    handleContentClick() {
      this.showMask = true;
    },
    handleMaskClick() {
      this.showMask = false;
      this.isShowTooltip = false;
    },
    previewImage(imgUrl) {
      uni.previewImage({
        urls: [imgUrl],
      });
    },
    sureClick(params) {
      this.clickable = false
      this.$emit("sureClick", params);
    },
    recPoisureClick(params) {
      this.$emit("sureClickCall", params);
    },
    AiPhotoClick(params){
      this.$emit("sureClickCall", params);
    },
    compareCall(params){
      this.$emit("sureClickCall", {
        txt:'全网AI比价功能正在灰度测试中呢，想要更多日期比价预定酒店，快来添加专属客服咨询吧！',
        type:'compare'
      });
    },
    gotoOrderUrl(orderId) {
      this.$emit("gotoOrderUrl", orderId);
    },
    // 打开迪士尼小程序
    gotoDisneyApp(appId) {
      uni.navigateToMiniProgram({
        appId,
      })
    },
    changeDestFun(code) {
      if(this.disableChangeDestBtn) return
      this.disableChangeDestBtn = true
      let id = this.message.card.destId;
      let aiDestList = uni.getStorageSync("aiDestList")
        ? JSON.parse(uni.getStorageSync("aiDestList"))
        : [];
      let aiDestItem = uni.getStorageSync("aiDestItem");
      if (id == aiDestItem.destinationId) return;
      if (aiDestList.length > 0) {
        const destObject = aiDestList.find((obj) => obj.destinationId == id);
        let parasm = {
          targetDestName: destObject.destinationName,
          sourceDestName: aiDestItem.destinationName,
          type: code ? 12 : 11,
        };
        if (code) {
          this.getChangeTxt({
            parasm,
            destObject,
          });
        } else {
          this.$emit("getTemplateDestCard", { parasm, destObject });
        }
      }
    },
    async getChangeTxt(obj) {
      await queryCardTemplateDest(obj.parasm).then((res) => {
        if (res.data) {
          this.showChangeOk = true;
          this.aiDestItem = obj.destObject;
          this.aiDestItem.code = true
          this.showChangeTxt = res.data.content;
          this.$emit("destClick", this.aiDestItem, 'questionChange');
        }
      });
    },
    // 接受编辑完成后的行程信息
    editFina(editId) {
      // this.$set(this.message.card, 'tripCardInfo', {'dayNodeList' :editInfo, sell: false})
      // 如果没有了任何商品需要
      this.btStatus = false;
      let index = this.meId.split("-")[1];
      this.$emit("editTripCardInfo", {
        itineraryPlanId: editId,
        meIndex: index,
      });
    },
    progressBar(total) {
      let count = 0;
      this.progressBarTimer = setInterval(() => {
        const random = Math.floor(Math.random() * 10);
        count += random;
        if (count > 99) {
          clearInterval(this.progressBarTimer);
        } else {
          this.progressWidth = count;
          this.outStatr = count;
        }
      }, 500);
    },
    // 修改行程
    editJourney(question) {
      this.$emit("onClickEdit", { question });
    },
    //行程商品
    showProduct(dspId){
      this.$emit("getDspProduct", { dspId: dspId, type: 2, dspStatus:false });
    },
    // 查看更多详情
    showCardDetail(dspId, showButton) {
      console.log(dspId);
      
      let dspStatus = false;
      if (this.getDspInfoStatus) {
        dspStatus = true;
      }
      this.$emit("showModal", { dspId: dspId, type: 2, dspStatus, showButton });
      if (!this.getDspInfoStatus) {
        this.getDspInfoStatus = true;
      }
    },
    // 查看详情
    gotoDetail() {
      if (!this.message.isShowDeatil) return;
      let breakTheIceStatus = false;
      if (this.breakTheIce) {
        breakTheIceStatus = true;
      }
      this.$emit("showModal", {
        dspId: this.message.dspId,
        type: 1,
        breakTheIceStatus,
      });
      if (!this.breakTheIce) {
        this.breakTheIce = true;
      }
    },
    // emitBus() {
    //   const  that = this
    //   return  new Promise(async (resolve, reject)=>{
    //     await this.$bus.$emit('stopPlay', that.meId)
    //     resolve()
    //   })
    // },
    // 语音合成 播放语音
    async onpay() {
      this.changeIndex({
        code:5,
        type:false,
        timeOut:0
      })
      if (!this.isleftPlaying) {
        // 只有在当前播放中，可以暂停音频，并继续播放
        if (
          this.innerAudioContextLeft &&
          !this.isPlayEnd &&
          this.audioCtxId &&
          this.meId == this.audioCtxId
        ) {
          this.isleftPlaying = !this.isleftPlaying;
          this.innerAudioContextLeft.play();
          return;
        } else {
          // 重新播放，需要释放其他的实例的结束播放
          const that = this;
          this.isleftPlaying = !this.isleftPlaying;
          this.isPlayEnd = false;
          this.audioCtxId = that.meId
          let [textList, innerAudioContext] = await this.$createPlayAudio(
            0,
            this.richTextNodes,
            this.message?.robotObj?.voiceType,
            this.message?.robotObj?.playbackRate
          );
          console.log(innerAudioContext, '语音播报插件获取');
          this.innerAudioContextLeft = innerAudioContext;
          await this.$playAudio(
            0,
            textList,
            this.message?.robotObj?.playbackRate
          );
          // 当前播放的音频跟异步回调是同一个才执行
          if (that.meId == that.audioCtxId) {
            this.changeIndex({
              code:1,
              type:false,
              timeOut:0
            })
            this.audioCtxId = -1
            this.isPlayEnd = true;
            this.isleftPlaying = false;
          }
        }
      } else {
        this.changeIndex({
          code:1,
          type:false,
          timeOut:0
        })
        this.isleftPlaying = !this.isleftPlaying;
        if(this.innerAudioContextLeft){
          this.innerAudioContextLeft.pause();
        }
      }
    },
    changeIspaying() {
      this.isleftPlaying = false;
    },
    onTextCopy(txt) {
      if (uni.getSystemInfoSync().platform == "android") {
        uni.showToast({
          title:'安卓设备暂不支持该功能~',
          icon:'none'
        })
        this.isShowTooltipTxt = false;
      } else {
        uni.setClipboardData({
          data: txt,
          success: function () {
            uni.showToast({
              icon: "none",
              title: "复制成功~",
              duration: 2000,
            });
          },
          complete: function () {
            this.isShowTooltipTxt = false;
          },
        });
      }
    },
    onText() {
      this.isShowTooltip = false;
      this.showMask = false
      if (this.message.text.length <= 0) {
        uni.showToast({
          icon: "none",
          title: "抱歉，语音转文字失败",
          duration: 2000,
        });
        return;
      }
      this.isShowtext = true;
    },
    onLongPressTxt() {
      this.isShowTooltipTxt = true;
    },
    onLongPress() {
      this.isShowTooltip = true;
      this.handleContentClick()
    },
    gotoDsp(dspId) {
      this.$navTo(
        "/ai/pages/experienceDetail/experienceDetail",
        {
          dspId,
        },
        "navigateTo"
      );
    },
    onClickTip(tip) {
      this.$emit("clickTip", tip);
    },
    onOpen() {
      this.isOpen = !this.isOpen;
    },
    startBlinking() {
      if (this.message?.pollAnswer == false) return;
      this.changeBlinking();
    },
    changeBlinking() {
      if (this.message.responseCompleted == true && this.timer == null) {
        this.isBlinking = false;
        return;
      }
      if (this.printedText.length == 0) {
        this.isBlinking = !this.isBlinking;
      } else {
        this.isBlinking = true;
      }

      setTimeout(() => {
        this.changeBlinking();
        this.$emit("onScrollToBottom");
      }, 500);
    },
    // 发出的语音播放
    playAudio(speechUrl) {
      if (this.isPlaying) return;
      this.isPlaying = true;
      this.innerAudioContext.src = speechUrl || this.message.speechUrl;
      this.innerAudioContext.play();
      this.innerAudioContext.onEnded(() => {
        this.isPlaying = false;
      });
    },
    oncopy() {
      uni.setClipboardData({
        data: this.richTextNodes,
        success: function () {
          uni.showToast({
            icon: "none",
            title: "复制成功~",
            duration: 2000,
          });
        },
      });
    },
    onLike() {
      this.isLike = !this.isLike
      if (this.isLike) {
        this.isUnlike = false
      }
      this.$emit("feedbackCall", {type: 'like', chatId: this.message.chatId, flag: this.isLike ? 1 : 0})
    },
    onUnlike() {
      if (!this.isUnlike) {
        this.$navTo(
          "/packageAI/pages/feedback/feedback", {chatId: this.message.chatId}, "navigateTo"
        );
      }
      this.isUnlike = !this.isUnlike
      if (this.isUnlike) {
        this.isLike = false
      }
      this.$emit("feedbackCall", {type: 'unlike', chatId: this.message.chatId, flag: this.isUnlike ? 2 : 0})
    },
    startTyping() {
      this.startBlinking();
      let that = this;
      this.timer = setInterval(() => {
        if (this.unprintedText && this.unprintedText.length > 0) {
          this.printedText += this.unprintedText.slice(0,2);
          this.unprintedText = this.unprintedText.slice(2);
          this.printedStatus = false;
          console.log('开始打字')
          this.$emit('setPrintedStatus',false)
        } else {
          console.log('结束打字', that.message)
          // 如果已经打印完成，并且判定已经响应完成了，就可以显示所有的卡片或者非打印数据
          setTimeout(() => {
            // if (that.message.responseCompleted) {
              
            // } else {
            // }
            that.printedStatus = true;
            this.$emit('setPrintedStatus',true)
            // if (this.message.showGif) {
            //   this.changeIndex({
            //     code:3,
            //     type:true,
            //     timeOut:2300,
            //     index:1
            //   })
            // }
            setTimeout(() => {
              this.$emit("onScrollToBottom");
            }, 300);
          }, 100);
          clearInterval(this.timer);
          this.timer = null;
        }
      }, this.interval);
    },
    setTxt() {
      if (this.think) {
        this.printedText = "";
      }
    },
    editItinerary(val) {

    },
    // TODO： 点击参考攻略 ，后续蔡迪从这里开始接入弹出攻略卡片
    onStrategyClick({ list, item,index }) {
      this.$emit("onStrategyClick", { list, item,index });
    },
    setTabBar(code) {
      this.$emit("setTabBar", code);
    },
    openLocation() {
      wx.getFuzzyLocation({
        type: "wgs84",
        success: function (res) {
          let params = {
            latitude: res.latitude,
            longitude: res.longitude,
          };
          uni.setStorageSync("location", params);
          uni.showToast({
            title: "授权成功",
            icon: "none",
            duration: 2000,
          });
        },
        fail: function (error) {
          uni.showModal({
            title: "提示",
            content: "您未授权定位，是否打开设置页面进行授权？",
            success(res) {
              if (res.confirm) {
                uni.openSetting({
                  success(res) {
                    if (res.authSetting["scope.userLocation"]) {
                      console.log("定位授权成功");
                    } else {
                      console.log("定位授权失败");
                    }
                  },
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        },
      });
    },
    changeIndex(obj) {
      this.$emit("changeGifIndex", obj);
    },
    resetTxt(){
      // this.message.text = '好的，我先不回答了，请稍后再问我。'
    },
    splitText(text) {
      let version = ''
      uni.getSystemInfo({
        success: function(res) {
          if (res.system.indexOf('iOS') !== -1) {
            console.log('This is an iOS device');
            version = res.system.split(' ')[1]
            // 在这里编写iOS设备的逻辑
          } else if (res.system.indexOf('Android') !== -1) {
            console.log('This is an Android device');
            // 在这里编写Android设备的逻辑
          } else {
            console.log('Unknown device');
          }
        }
      });
      if(version == '16.0' && text.startsWith("http")){
        let lines = [];
        while (text.length > 0) {
          lines.push(text.substring(0, 20));
          text = text.substring(20);
        }
        return lines.join('\n');
      }else{
        return text
      }
      
    },
    //获取问题列表
    guidingSuggestActions(code){
      this.$emit('guidingSuggestActions',code)
    },
    actionClick(item){
      // yuanbin 2025-05-03 暂时过滤登陆校验
      // if(!this.$isLogin()){
      //   return
      // }else{
        let text = item.promptText? item.promptText : item.actionText
        item.actionText = text
        this.$emit('sureClickCall',{...item, type: 'actions', txt: item.actionText})
      // }
      
    },
    openWeChatUrl(list){
      uni.previewImage({
        urls: [list]
      })
    },
    //订单按钮跳转
		orderItemClick(item) {
			if (!this.$isLogin()) {
				return;
			}
			let { status, key } = {
        status:-1,
        key:-1
      }
			const url = '/packageB/pages/myOrderList/myOrderList'
			this.$navTo(url, {
				status, key
			}, 'navigateTo')
		},
    //跳转商品详情
    toProductDetail(item){
      console.log('item',item)
    },
    changeQuestion() {
      this.$emit('changeQuestion', this.message)
    },
    questionClick(question) {
      this.clickable = false
      this.$emit('sureClickCall',{type:'text',text:question})
    },
    gotoRefund(orderId) {
      this.$navTo('/packageA/pages/applyRefund/applyRefund', {orderId}, 'navigateTo')
    },
  },
  mounted() {
    // 创建录音管理器
    // this.recorderManager = uni.getRecorderManager()
    // 创建音频上下文
    this.innerAudioContext = uni.createInnerAudioContext();
    // 这个$bus没有找到
    // this.$bus.$on("stopPlay", (data) => {
    //   // 处理接收到的数据
    //   if (data !== this.meId) {
    //     this.isleftPlaying = false;
    //   }
    // });
  },
  watch: {
    "message.responseCompleted": {
      immediate: true,
      deep: true,
      handler: function (value, old) {
        if (value == false) {
        }
      },
    },
    "message.status": {
      //状态
      immediate: true,
      deep: true,
      handler: function (value, old) {
        if(value == 2 || value == -1){
          this.changeIndex({ //请求失败，命中黑名单
            code:4,
            type:true,
            timeOut:2300,
            index:1
          })
        }
        this.$emit('changeSendStatus',value)
      },
    },
    "message.text": {
      //答案
      immediate: true,
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue && newValue !== oldValue) {
          if (this.message.isResetText) {
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.printedText = newValue;
            this.unprintedText = "";
            return;
          }
          this.setTxt();
          this.unprintedText = newValue.slice(this.printedText.length);
          clearInterval(this.timer);
          this.startTyping();
        }
      },
    },
    "message.think": {
      immediate: true,
      deep: true,
      handler: function (newValue, oldValue) {
        if(newValue){
          this.changeIndex({ //思考中
            code:2,
            type:true,
            timeOut:2300,
            index:1
          })
        }
        if (newValue !== oldValue) {
          if (oldValue) {
            this.think = false;
          } 

          if(!newValue) {
            this.think = false;
          }
        }
      },
    },
    "message.clickable": {
      immediate: true,
      deep: true,
      handler: function (newValue, oldValue) {
        this.clickable = newValue
      },
    },
    audioCtxId: {
      immediate: true,
      handler: function (value, old) {
        if (value !== this.meId) {
          this.isleftPlaying = false;
          // this.startBlinking()
        }
      },
    },
    message: {
      immediate: true,
      deep: true,
      handler: function (value,oldValue) {
        if (value?.pollAnswer == true) {
          return;
        }
        setTimeout(() => {
          let query = uni.createSelectorQuery().in(this);
          query
            .select("#message-text")
            .boundingClientRect((resp) => {
              if (!resp) return;
              if(!this.showOpen){
                this.showOpen = resp.height > 360;
              }
            })
            .exec();
        }, 100);
      },
    },
    startProgress: {
      immediate: true,
      deep: true,
      handler: function (value) {

      },
    },
    "message.startProgress": {
      immediate: true,
      deep: true,
      handler: function (value, old) {
        if (value) {
          this.progressWidth = 0;
          this.showProgress = value;
          this.progressBar(20);
        } else {
          clearInterval(this.progressBarTimer);
          this.progressWidth = 100;
          setTimeout(() => {
            this.showProgress = false;
          }, 800);
        }
      },
    },
    "message.suggestActions": {
      immediate: true,
      deep: true,
      handler: function (value, old) {
        
        if (value) {
          this.$emit('callBackSetData',{type:1,data:value})
        } else {
          this.$emit('callBackSetData',{type:1,data:[]})
        }
      },
    },
  },
  computed: {
    richTextNodes() {
      let result;
      if (this.isBlinking) {
        result =
          this.printedText + "<strong><font color=blue> |</font></strong> ";
      } else {
        result = this.printedText;
      }
      return result;
    },
    needMaxheight() {
      return this.showOpen && !this.isOpen;
    },
    showShadow() {
      return this.needMaxheight;
    },
    showSelectorCard() {
      return (
        this.message?.selectorCard !== null &&
        this.message?.selectorCard !== undefined &&
        this.timer == null
      );
    },
    showFeedack() {
      return this.mode === "left";
    },
    showTips() {
      return this.message?.tips?.length > 0;
    },
    showCard() {
      return this.showProductCard;
    },
    isSinglePoi() {
      return this.message?.card?.poiList?.length == 1;
    },
    singlePoiValue() {
      const poiList = this.message?.card?.poiList;
      if (poiList && poiList.length == 1) return poiList[0];
      return undefined;
    },
    showSinglePoi() {
      return this.message?.card?.poiList?.length == 1;
    },
    showPoiList() {
      return this.message?.card?.poiList?.length > 1;
    },
    showArticleList() {
      return this.message?.card?.articleList?.length > 0;
    },
    showProductCard() {
      return this.message?.card?.productList?.length > 0 && this.printedStatus && this.message?.card.sceneCode !== 4;
    },
    isShowDetail() {
      return (
        this.message?.responseCompleted == true &&
        this.printedText.length > 10 &&
        this.timer == null
      );
    },
    isShowProgress() {
      return this.message?.startProgress;
    },
    showTripCard() {
      return this.message?.card?.tripCardInfo?.dayNodeList.length > 0;
    },
    showTravelDemand() {
      return this.message?.card?.journeyDemand;
    },
    showNearbyHotel() {
      return this.message?.card?.recHotel;
    },
    isShowStrategy() {
      return (
        this.message?.refArticleList &&
        this.message?.refArticleList.length > 0 &&
        this.printedStatus
      );
    },
    showTraveTips() {
      return this.message?.card?.tipsInfo;
    },
    isShowWalkthrough() {
      return (
        this.message?.card?.recArticle &&
        this.message?.card?.recArticle?.articleList.length != 0 &&
        this.message?.card?.recArticle?.articleList.length != 0 &&
        this.printedStatus
      );
    },
    isShowLocalcuisine() {
      //展示附近餐厅卡片
      return (
        this.message?.showRecRestaurant &&
        this.message?.responseCompleted == true &&
        this.printedStatus &&
        this.message?.card?.recRestaurantData?.recType == 1
      );
    },
    showTopLocalcuisine() {
      //展示排行餐厅卡片
      return (
        this.message?.showRecRestaurant &&
        this.message?.responseCompleted == true &&
        this.printedStatus &&
        this.message?.card?.recRestaurantData?.recType == 2
      );
    },
    isShopping() {
      //展示附近商场卡片
      return (
        this.message?.showMarket &&
        this.message?.responseCompleted == true &&
        this.printedStatus &&
        this.message?.card?.marketData?.recType == 1
      );
    },
    showTopShopping() {
      //展示排行商场卡片
      return (
        this.message?.showMarket &&
        this.message?.responseCompleted == true &&
        this.printedStatus &&
        this.message?.card?.marketData?.recType == 2
      );
    },
    showPreference() {
      return (
        this.message?.showItineraryTheme &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showRecItinerary() {
      return (
        this.message?.showRecItinerary &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showChangeDest() {
      return (
        this.message?.showChangeDest &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showRecPoi() {
      return (
        this.message?.showRecPoi &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showRead() {
      return (
        this.message?.showRead &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showArticleAssistantUrl() {
      return (
        this.message?.showarticleAssistantUrl &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showItineraryCard(){
      return (
        this.message?.itineraryCard &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showGraphicItineraryCard () {
      return(
        this.message?.graphicItineraryCard &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      )  
    },
    showNewDialogue(){
      return (
        this.message?.showNewDialogue &&
        this.message?.responseCompleted == true &&
        this.printedStatus
      );
    },
    showNewChat(){
      return (
        this.message?.showNewChat
      );
    },
    showSharePoi(){
      return (
        this.message?.card?.poi
      );
    },
    showShareProduct(){
      return (
        this.message?.card?.product && this.message?.card?.chatCardList.length == 0 && this.message?.card?.answerType === 12
      );
    },
    showShareOrderInfo(){
      return (
        this.message?.card?.orderInfo && this.message?.card?.chatCardList.length == 0
      );
    },
    showShareAiPhoto(){
      return (
      this.message?.card?.aiPhoto && this.message?.card?.answerType == 5
      );
    },
    //合同卡片
    showContract(){
      return this.message.showContractCard || (this.message?.card?.contractInfoList && this.message?.card?.contractInfoList.length > 0)
    },
    //分享行程卡片
    showShareItinerary(){
      return (this.message?.card?.itineraryCard && this.message?.card?.answerType == 6)
    },
    //分享攻略卡片
    showShareArticle(){
      return (this.message?.card?.recArticle && this.message?.card?.answerType == 8)
    },
    showAIphotoHome(){
      return (this.message?.card?.answerType == 7)
    },
    showAIPhotoShareCard() {
      return (this.message?.card?.answerType == 11 && this.message?.card?.aiPhoto);
    },
    showShareDSPInfo(){
      return (
      this.message?.card?.shareDSPInfo && this.message?.card?.answerType == 12 && !this.message?.card.chatSynthesizeCard
      );
    },
    showShareHotelInfo(){
      return (
      this.message?.card?.chatCardList && this.message?.card?.chatCardList?.[0]?.type == 201 && !this.message?.card.chatSynthesizeCard
      );
    },
    showShareHotelOrderInfo(){
      return (
      this.message?.card?.chatCardList && (this.message?.card?.chatCardList?.[0]?.type == 202 || this.message?.card?.chatCardList?.[0]?.type == 203
      || this.message?.card?.chatCardList?.[0]?.type == 402 || this.message?.card?.chatCardList?.[0]?.type == 204)
      );
    },
    showHotelPreferenceInfo() {
      return (
        this.message?.showHotelPreference
      )
    },
    showHotelPriceParityInfo() {
      return (
        this.message?.showHotelPriceParity
      )
    },
    showAIPhotoReceive(){
      return (
      this.message?.card?.chatCardList && this.message?.card?.chatCardList?.[0]?.type == 401 || 
      this.message?.showCardList && this.message?.card?.chatCardList?.[0]?.type == 306
      );
    },
    showHotelCompare(){
      return (
        this.message?.card?.chatCardList && this.message?.card?.chatCardList?.length > 0 && this.printedStatus
      );
    },
    showWeChatUrl(){
      return (
        this.message?.card?.wechatUrl
      );
    },
    showImgUrl() {
      return (
        this.message?.card?.imageList
      )
    },
    showAppDownload() {
      return (
        this.message?.card?.appDownload
      )
    },
    showRecProductQa(){
      return (
        this.message?.card?.recProductQa
      )
    },
    showService(){
      return (
        this.message?.sceneCode == 51 && this.message?.customerService && this.printedStatus
      )
    },
    //显示混排卡片
    showUnifyCard(){
      console.log('this.message', this.message)
      return this.message?.card?.chatSynthesizeCard && this.printedStatus
    },
    showPoiPhoneCard() {
      return this.message?.card?.poiCard && this.printedStatus
    }
  },
};
</script>

<style lang="scss" scoped>
.message-root {
  padding-top: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  // position: relative;
  .avatar-text-box.position {
    margin-top: 24rpx;
    color: #1e44af;
    font-size: 28rpx;
  }
  .avatar-text-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    .pic-box {
      width: 420rpx;
      height: 420rpx;
      border-radius: 26rpx;
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .pay-icon {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
      background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/record-paying.png")
        0 0 no-repeat;
      background-size: 100%;

      &.playing-gif {
        width: 40rpx;
        height: 40rpx;
        background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/play-icon.gif")
          0 0 no-repeat;
        background-size: 100%;
      }
    }

    .text {
      margin-top: 6rpx;
      padding: 16rpx 26rpx;
      font-size: 32rpx;
      line-height: 46rpx;
      border-radius: 20rpx;
      display: flex;
      align-content: center;
      justify-content: flex-start;

      &.text-bg {
        background: rgba(253, 255, 235, 1);
        border-radius: 26rpx 26rpx 8rpx 26rpx;
        font-size: 32rpx;
        color: $sl-color-black;
        line-height: 46rpx;
      }

      &.text-content {
        // margin-top: 0;
        // background: #ffffff;
        // margin-right: 98rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        // line-height: 28rpx;
        border-radius: 40rpx 40rpx 11rpx 40rpx;
        background: rgba(231, 251, 255, 0.9);
        margin-right: 20rpx;
        color: $sl-color-grey !important;
        border: 1rpx solid #ffffff;
        -webkit-backdrop-filter: blur(10.8695652174px);
        backdrop-filter: blur(10.8695652174px);
      }
    }

    .tool-tip {
      width: 118rpx;
      height: 161rpx;
      background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/text-box.png")
        0 0 no-repeat;
      background-size: 100%;
      position: absolute;
      top: -150rpx;
      right: 50rpx;
      z-index: 10;
    }
    .tool-tip-txt {
      width: 118rpx;
      height: 161rpx;
      background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/text-box-2.png")
        0 0 no-repeat;
      background-size: 100%;
      position: absolute;
      top: -150rpx;
      right: 50rpx;
    }
    .record-text-box {
      font-size: 28rpx;
      line-height: 46rpx;
      background: #fff;
      width: 300rpx;
      min-height: 46rpx;
    }
    .message-text-box {
      // margin-left: 20rpx;
      position: relative;
      padding: 6rpx 0;

      .shadow {
        position: absolute;
        left: 26rpx;
        right: 26rpx;
        bottom: 57rpx;
        height: 40rpx;
        background: linear-gradient(
          180deg,
          rgba(247, 250, 255, 0) 0%,
          rgba(236, 244, 253, 0.71) 100%
        );
      }

      .selector-box {
        width: 100%;
        // height: 100rpx;
        padding: 0 26rpx 20rpx 26rpx;
        display: flex;
        justify-content: space-between;

        .left-butter {
          width: 190rpx;
          height: 68rpx;
          line-height: 68rpx;
          background: #e5ebff;
          border-radius: 34rpx;
          text-align: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #5876d6;
        }

        .right-butter {
          width: 250rpx;
          height: 68rpx;
          background: #7696ff;
          border-radius: 34rpx;
          line-height: 68rpx;
          text-align: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .open-btn {
        position: absolute;
        bottom: 0rpx;
        left: 0;
        right: 0;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #4d566a;
        line-height: 36rpx;
        height: 36rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 9rpx;
        margin-bottom: 12rpx;
        justify-content: center;

        .img {
          margin-left: 8rpx;
          width: 17rpx;
          height: 11rpx;
        }
      }

      .pay-box {
        position: relative;
        padding: 0 26rpx 14rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5876d6;
        line-height: 40rpx;
        display: flex;
        height: 84rpx;
        // align-items: center;
        justify-content: space-between;
        .right-box {
          position: absolute;
          left: 20rpx;
          // bottom: 14rpx;
          // width: 117rpx;
          height: 60rpx;
          display: flex;

          .pay-btn {
            margin-right: 14rpx;
            width: 60rpx;
            height: 60rpx;
            background: url("")
              0 0 no-repeat;
            background-size: 100%;

            &.suspend {
              background: url("")
                0 0 no-repeat;
              background-size: 100%;
            }
          }

          .cp-btn {
            margin-right: 14rpx;
            width: 60rpx;
            height: 60rpx;
            background: url("")
              0 0 no-repeat;
            background-size: 100%;
          }
          .like {
            background: url("")
              0 0 no-repeat;
            background-size: 100%;
            &.suspend {
              background: url("")
              0 0 no-repeat;
              background-size: 100%;
            }
          }
          .unlike {
            background: url("")
              0 0 no-repeat;
            background-size: 100%;
            margin-right: 0;
            &.suspend {
              background: url("")
              0 0 no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .suggest-box {
        margin: 0 20rpx 0 20rpx;
        padding: 20rpx 0 14rpx 0;
        border-top: 2rpx solid rgba(228,228,244,0.5);
        .suggest-title {
          font-weight: 600;
          font-size: 32rpx;
          color: #131328;
          line-height: 46rpx;
        }
        .suggest-content {
          display: flex;
          align-items: center;
          color: rgba(27, 156, 97, 1);
          margin-top: 20rpx;
          .suggest-text {
            font-size: 32rpx;
            line-height: 46rpx;
            vertical-align: bottom
          }
        }
      }
    }

    .message-maxheight {
      @include maxLine(10);
    }

    .more-margin {
      margin: 16rpx 26rpx 57rpx 26rpx !important;
    }
  }

  .message-card-box {
    // margin: 30rpx 0 0 0;
    background: #e5ebff;
    border-radius: 26rpx;
    width: 502rpx;

    .vimage-text-box {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      border-radius: 26rpx;
      background: rgba(255, 255, 255, 0.5);
      width: 100%;
      padding-bottom: 20rpx;
      .title {
        font-size: 28rpx;
        color: $sl-color-black;
        height: 82rpx;
        line-height: 82rpx;
        background: #e5ebff;
        font-weight: 600;
        padding: 0 24rpx 0 24rpx;
        border-radius: 26rpx 26rpx 0 0;
      }

      .image-text:not(:last-child) {
        margin-bottom: 10rpx;
      }
    }

    .vimage-text-box:not(:first-child) {
      margin-top: 40rpx;
    }
  }

  .feed-back {
    margin: 30rpx 30rpx 0 101rpx;
    display: flex;
    flex-direction: row;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #a8a8a8;
    line-height: 33rpx;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 123rpx;
      height: 53rpx;
      background: #fff9f7;
      border-radius: 27rpx;
    }

    .item:last-child {
      margin-left: 14rpx;
    }
  }

  .tips {
    margin-top: 50rpx;
    display: flex;
    flex-direction: row;

    .tips-box {
      display: flex;
      flex-direction: column;

      .tips-list {
        .tip {
          margin-top: 20rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1e44af;
          line-height: 36rpx;
        }

        .tip:first-child {
          margin-top: 30rpx;
        }
      }
    }
  }

  .left {
    justify-content: flex-start;
    // margin-right: 66rpx;

    .message-text-box {
      margin-top: 6rpx;
      // background-color: #ecf4fd;
      background: rgba(255, 255, 255, 0.40);
      border-radius: 8rpx 26rpx 26rpx 26rpx;
      border: 4rpx solid #FFFFFF;
      &.active{
        min-width: 330rpx;
      }
      .text {
        margin: 20rpx 20rpx 24rpx 20rpx;
        background-color: unset;
        padding: 0;
      }
    }

    .text {
      background-color: #ecf4fd;
      margin-left: 20rpx;
      color: $sl-color-black;
      // text-align: justify;
    }
  }

  .right {
    justify-content: flex-end;
    margin-left: 66rpx;
    .text {
      border-radius: 40rpx 40rpx 11rpx 40rpx;
      background: rgba(231, 251, 255, 0.9);
      color: $sl-color-grey;
      border: 1rpx solid #ffffff;
      backdrop-filter: blur(10.8695652173913px);
    }
    .text:active {
      background: rgba(206, 236, 242, 0.9);
    }
  }
}

.progress-box {
  flex: 1;
}

.progress-bar {
  width: 100%;
  height: 10rpx;
  background-color: #f4f8ff;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-bar-inner {
  width: 0%;
  height: 100%;
  background-color: #9ec6fd;
  transition: width 0.5s ease-in-out;
}
.sureChangeBox {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 70rpx;
  margin-bottom: 20rpx;
  .btn-box {
    height: 68rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 34rpx;
    &.false {
      background: #e5ebff;
      width: 190rpx;
      &.disabled {
        .btn-txt {
          color: #5876d6;
          opacity: 0.4;
        }
      }
      .btn-txt {
        color: #5876d6;
        font-size: 28rpx;
      }
    }
    &.true {
      background: #7696ff;
      width: 250rpx;
      &.disabled {
        background: rgba(118, 150, 255, 0.4);
      }
      .btn-txt {
        color: #ffffff;
        font-size: 28rpx;
      }
    }
    .btn-icon {
      width: 216rpx;
      height: 60rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.changeOkBox {
  width: 358rpx;
  height: 48rpx;
  background: rgba(255,255,255,0.5);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24rpx auto 0 auto;
  &.active{
    width: 190rpx;
  }
  .lineBox {
    width: 130rpx;
    height: 2rpx;
    background: #eeeeee;
  }
  .lineTxt {
    text-align: center;
    height: 24rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #787898;
    line-height: 24rpx;
  }
}
.position {
  // margin-top: 30rpx;
  // padding: 0 26rpx;
  color: #5876d6;
  font-size: 24rpx;
}
.journey-btn {
  width: 90%;
  margin: 10rpx auto 0 auto;
  height: 80rpx;
  text-align: center;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $sl-color-btn-background;
  box-shadow: 0rpx 2rpx 15rpx -2rpx rgba(15, 69, 111, 0.36);
  border-radius: 20rpx;

  .journey-icon {
    width: 23rpx;
    height: 23rpx;
    margin-right: 8rpx;
  }
}
.articleImg {
  margin-top: 20rpx;
  width: 220rpx;
  height: 400rpx;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9; /* 确保遮罩在最顶层 */
}
.strongUsher{
  background: rgba(255,255,255,0.4);
  border-radius: 8rpx 26rpx 26rpx 26rpx;
  border: 4rpx solid #FFFFFF;
  color: $sl-color-grey;
  padding: 20rpx;
  margin-top: 24rpx;


  .main-box{
    width: 100%;
    height: 290rpx;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    .card-mask{
      width: 100%;
      height: 225rpx;
      bottom: 0;
      left: 0;
      z-index: 0;
      background: linear-gradient( 180deg, rgba(238,238,238,0) 0%, rgba(41,41,41,0.5) 100%);
      position: absolute;
      border-radius: 0 0 26rpx 26rpx;
    }
    .mainPicture{
      width: 100%;
      height: 290rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 26rpx;
    }
    .itineraryTitle{
      z-index: 1;
      font-size: 36rpx;
      font-weight: 600;
      line-height: 52rpx;
      color: #FFFFFF;
    }
    .itineraryTitle.active{
      font-size: 36rpx;
    }
  }
  .btn-list-box{
    // width: 454rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    font-weight: 600;
    .btn-1{
      width: 317rpx;
      height: 80rpx;
      background: #B4EF4E;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      color: $sl-color-black;
    }
    .btn-2{
      width: 317rpx;
      height: 80rpx;
      background: $sl-color-grey-white;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      color: $sl-color-black;
    }
  }
}
.problem-box{
  margin: 0 20rpx 16rpx 20rpx;
  color: $sl-color-black;
  font-size: 32rpx;
  .problem-box-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
    line-height: 46rpx;
    .refresh-box{
      display: flex;
      align-items: center;
      color: #767697;
      font-size: 28rpx;
      line-height: 40rpx;
      .refresh-icon{
        width: 22rpx;
        height: 20rpx;
        margin-left: 9rpx;
      }
    }
  }
  .problem-box-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    .action-box{
      position: relative;
      width: 317rpx;
      // 252rpx
      min-height: 270rpx;
      border-radius: 26rpx;
      margin-top:12rpx;
      padding-bottom: 12rpx;
      .action-bg-img {
        width: 140rpx;
        height: 140rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        background-size: cover;
      }
      &.action-ARTICLE{
        background: linear-gradient( 180deg, rgba(169, 84, 19, 1) 0%, rgba(207, 172, 136, 1) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('');
        }
      }
      &.action-AIGC{
        background: linear-gradient( 180deg, #FFA6CA 0%, rgba(255,255,255,0) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-19/aigc-img.png');
        }
      }
      &.action-ITINERARY{
        background: linear-gradient( 180deg, rgba(27, 157, 97, 1) 0%, rgba(118, 174, 109, 1) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('');
        }
      }
      &.action-ORDER{
        background: linear-gradient( 180deg, #B3C5FF 0%, rgba(255,255,255,0) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-19/order-img.png');
        }
      }
      &.last {
        position: absolute;
        top: 264rpx;
        right: 0;
      }
      .action-title-box{
        padding: 30rpx 18rpx 28rpx 18rpx;
        display: flex;
        align-items: center;
        .subTitle{
          font-size:20rpx;
          padding-left: 16rpx;
        }
        .title-icon{
          width: 24rpx;
          height: 24rpx;
        }
        .title-img{
          width: 126rpx;
          height: 30rpx;
        }
        .title-ARTICLE{
          color: #8249c7;
        }
        .title-AIGC{
          color:#F98FDB;
        }
        .title-ITINERARY{
          color:#7B73ED;
        }
        .sub-title{
          font-size: 20rpx;
          color: #7B73ED;
        }
      }
      .line-view {
        height: 2rpx;
        background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
        margin: 0 18rpx;
      }
    }
    .problem-list-item{
      margin: 0rpx 10rpx 0rpx 18rpx;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 16rpx;
      // padding: 17rpx 10rpx 17rpx 18rpx;
      .item-title{
        color: $sl-color-btn-txt;
        font-size: 24rpx;
        font-weight: 600;
        line-height: 34rpx;
        flex: 1;
        padding-right: 12rpx;
      }
      .item-btn{
        width: 112rpx;
        height: 54rpx;
        background: $sl-bg-color-grey;
        border-radius: 27rpx;
        color: $sl-color-blue;
        font-size: 28rpx;
        font-weight: 600;
        text-align: center;
        line-height: 54rpx;
      }
    }
  }
}
.sayHelloContent{
  margin: 14rpx 20rpx 0 20rpx;
  color: #131328;
  font-weight: 600;
  font-size: 36rpx;
  line-height: 52rpx;
}
.wechatUrl{
  margin-top: 20rpx;
  width: 400rpx;
  height: 400rpx;
}
.imgUrl {
  margin-top: 12rpx;
  width: 220rpx;
  // height: 400rpx;
  border-radius: 26rpx;
}
.more-order-box{
  width: 502rpx;
  min-height: 174rpx;
  background: rgba(255,255,255,0.7);
  border-radius: 8rpx 26rpx 26rpx 26rpx;
  border: 1rpx solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10.8695652173913px);
  margin-top:12rpx;
  padding: 22rpx 24rpx;
  .order-txt-1{
    color:#767697;
    font-size:28rpx
  }
  .order-txt-2{
    color:#5876D6;
    font-size:24rpx;
    margin-top:34rpx;
  }
}
.product-box{
  // width: 454rpx;
  // height: 134rpx;
  // background: #FFFFFF;
  border-radius: 16rpx;
  margin: 76rpx 20rpx 20rpx 20rpx;
  .question-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28rpx;
    .question-text {
      font-weight: 400;
      font-size: 32rpx;
      color: #404062;
      line-height: 32rpx;
    }
    .question-sm-text {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #767697;
      line-height: 28rpx;
      .change-icon {
        width: 22rpx;
        height: 19rpx;
        margin-left: 4rpx;
      }
    }
  }
  .question-box {
    width: 100%;
    .question-item {
      width: 100%;
      height: 68rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;
      border-radius: 16rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #131328;
      line-height: 28rpx;
      padding: 19rpx 24rpx;
      margin-top: 12rpx;
      .image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
  .quetion-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 19rpx;
    .btn {
      width: 316rpx;
      height: 68rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #EBEBF4;
      border-radius: 16rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #131328;
      line-height: 28rpx;
      &.right {
        background: #B4EF4E;
        margin-left: 0;
      }
    }
  }
}
.service{
  width: 500rpx;
  height: 40rpx;
  position: relative;
  .po-button{
    border: none;
    display: inline-block;
    opacity: 0;
    width: 500rpx;
    height: 40rpx;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    font-size: 28rpx;
  }
  .po-text{
    width: 500rpx;
    height: 40rpx;
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
    color:#131328;
    font-size: 32rpx;
    padding: 0 0 0 20rpx;
    line-height: 46rpx;
  }
}
.scroll-box {
  width: 454rpx;
  margin-bottom: 24rpx;
  overflow-y: auto;
  display: flex;
  align-items: center;
  .scroll-item {
    width: 210rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-right: 16rpx;
    height: 310rpx;
    .item-box {
      display: flex;
      flex-direction: column;
      width: 210rpx;
      position: relative;
      .img-box {
        width: 210rpx;
        height: 210rpx;
        border-radius: 16rpx;
        position: relative;
        .item-img {
          width: 210rpx;
          height: 210rpx;
          border-radius: 16rpx;
        }
        .type-box {
          position: absolute;
        }
        .item-tips {
          position: absolute;
          width: 210rpx;
          height: 42rpx;
          background: linear-gradient(
            180deg,
            rgba(19, 19, 40, 0) 0%,
            rgba(19, 19, 40, 0.6) 100%
          );
          border-radius: 0rpx 0rpx 16rpx 16rpx;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .tips-box {
            font-size: 20rpx;
            color: #ffffff;
            padding-right: 10rpx;
          }
        }
        .item-icon {
          position: absolute;
          left: 0;
          top: 0;
          width: 68rpx;
          height: 30rpx;
        }
        .center-icon {
          width: 113rpx;
          height: 56rpx;
          position: absolute;
          left: 50%;
          margin-left: -57rpx;
          top: 50%;
          margin-top: -28rpx;
        }
      }
      .item-info {
        flex: 1;
        padding: 0 14rpx;
        .info-title {
          color: #404062;
          font-size: 24rpx;
          margin: 14rpx 0 0 0;
          font-weight: 600;
        }
        .price-box {
          margin: 14rpx 0 0 0;
          display: flex;
          align-items: center;
          .price-1 {
            color: #f93f55;
            font-size: 20rpx;
            margin-right: 2rpx;
          }
          .price-2 {
            color: #b5b5d2;
            font-size: 20rpx;
          }
        }
        .tag-text {
          margin: 14rpx 0 0 0;
          color: #767697;
          font-size: 20rpx;
        }
      }
    }
  }
}

  .strongUsher-none{
    padding-bottom: 24rpx;
  }
</style>
